// 基础UI模板组件
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
// 必须显示的引入语言文件
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
// 源码

export default class MyEditor extends DecoupledEditor {
  static defaultConfig = {
    language: 'zh-cn',
    toolbar: {
      items: [
        'heading',
        '|',
        'fontfamily',
        'fontsize',
        'fontColor',
        'fontBackgroundColor',
        '|',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        '|',
        'alignment',
        '-',
        'numberedList',
        'bulletedList',
        '|',
        'outdent',
        'indent',
        '|',
        'link',
        'blockquote',
        'uploadImage',
        'insertTable',
        '|',
        'undo',
        'redo'
      ],
      shouldNotGroupWhenFull: true
    },
    fontFamily: {
      options: ['default', '宋体,Times New Roman,Times,Serif'],
      supportAllValues: true
    },
    image: {
      resizeUnit: 'px',
      toolbar: ['imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText']
    },
    table: {
      defaultHeadings: { rows: 1, columns: 1 },
      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'],
      tableProperties: {
        borderColors: [
          {
            color: 'hsl(4, 90%, 58%)',
            label: 'Red'
          },
          {
            color: 'hsl(340, 82%, 52%)',
            label: 'Pink'
          }
        ],
        backgroundColors: [
          {
            color: 'hsl(4, 90%, 58%)',
            label: 'Red'
          },
          {
            color: 'hsl(340, 82%, 52%)',
            label: 'Pink'
          }
        ]
      },
      tableCellProperties: {
        borderColors: [
          {
            color: 'hsl(4, 90%, 58%)',
            label: 'Red'
          },
          {
            color: 'hsl(340, 82%, 52%)',
            label: 'Pink'
          }
        ],
        backgroundColors: [
          {
            color: 'hsl(4, 90%, 58%)',
            label: 'Red'
          },
          {
            color: 'hsl(340, 82%, 52%)',
            label: 'Pink'
          }
        ]
      }
    }
  }
}
